<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>机器设备</title>


    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../src/static/jquery.js"></script>
    <script src="../src/static/echarts.js"></script>
    <link rel="stylesheet" href="jiansuo.css">
</head>
<body>
<div class="top">
    <div class="top_one"><label id="sbn"></label>数据</div>
</div>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md3">
            <div class="nav">
                <div class="nav_one">累计检测数</div>
                <div class="nav_two"><label id="lay1"></label></div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="nav">
                <div class="nav_one">累计付款数</div>
                <div class="nav_two"><label id="lay2"></label></div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="nav">
                <div class="nav_one">今天检测数</div>
                <div class="nav_two"><label id="lay3"></label></div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="nav">
                <div class="nav_one">今天付款数</div>
                <div class="nav_two"><label id="lay4"></label></div>
            </div>
        </div>
    </div>
    <script>
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]);
            return null;
        }

        var param = getQueryString('_ijt');
        $('#sbn').html(param);
        // 使用刚指定的配置项和数据显示图表。

        $.ajax({
            url: '/api/getChioceInformation',
            type: 'get',
            datatype: 'json',
            data: {sbno: param},
            success: function (data) {
                $('#lay1').html(data.sqNumber)
                $('#lay2').html(data.sqPayNumber)
                $('#lay3').html(data.sqDayNumber)
                $('#lay4').html(data.sqTPayNumber)
            }
        })
    </script>
</div>

<div id="main" class="tjt"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['检测数', '付款数'],
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '检测数',
                type: 'bar',
                barWidth: '30',
                color: '#1E90FF',
                data: []
            },
            {
                name: '付款数',
                type: 'bar',
                barWidth: '30',
//                color:'#90EE90',
                data: []
            },

        ]
    };

    // 正则表达式获取设备编号
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURI(r[2]);
        return null;
    }

    var param = getQueryString('_ijt');
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    $.ajax({
        url: '/api/getInformationMouthEcharts',
        data: {sbno: param},
        type: 'get',
        datatype: 'json',
        success: function (data) {
            myChart.setOption({
                xAxis: {data: data.date},
                series: [
                    {name: '检测数', data: data.listPaid},
                    {name: '付款数', data: data.listPay}
                ]
            });
        }
    })
</script>
<div style="margin-left: 15%;margin-top: 5%">
    <table id="demo1" lay-filter="test"></table>
</div>
<script>


    function RiQi(sj) {
        var now = new Date(sj * 1000);
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var date = now.getDate();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        if (month < 10) {
            month = '0' + month;
        }
        if (date < 10) {
            date = '0' + date;
        }
        if (hour < 10) {
            hour = '0' + hour;
        }
        if (minute < 10) {
            minute = '0' + minute;
        }
        if (second < 10) {
            second = '0' + second;
        }
        return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
    }

    layui.use('table', function () {
        var table = layui.table;


        // 正则表达式获取设备编号
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]);
            return null;
        }

        var param = getQueryString('_ijt');


        // 打印对应的设备编号
        // console.log(param);
        //第一个实例
        table.render({
            elem: '#demo1'
            , height: 500
            , width: 1058
            , url: '/api/getUserInformationList' //数据接口
            , where: {sbno: param}
            , page: true //开启分页
            , limits: '[10,20,30,40]'
            , loading: 'true'
            , cols: [[ //表头
                {field: 'phone', title: '手机号码', width: 150, fixed: 'left'}
                , {field: 'age', title: '年龄', width: 100}
                , {field: 'gender', title: '性别', width: 100, templet: '#titleTpl2'}
                , {field: 'paytype', title: '付款方式', width: 100, templet: '#titleTpl3'}
                , {field: 'status', title: '是否付款', width: 100, templet: '#titleTpl4'}
                , {
                    field: 'addtime', title: '检测时间', width: 250,
                    templet: function (d) {
                        var timen = RiQi(d.addtime.time / 1000);
                        return timen;
                    }
                }
                , {field: 'pdfurl', title: '查看报告', width: 250, templet: '#titleTpl'}

            ]],

        });
    });

</script>
<script type="text/html" id="titleTpl">
    <a href="{{d.pdfurl}}" target="_blank" class="layui-table-link">查看报告</a>
</script>
<script type="text/html" id="titleTpl2">
    {{# if(d.gender=='0'){ }}
    男
    {{# } else{ }}
    女
    {{# } }}
</script>
<script type="text/html" id="titleTpl3">
    {{# if(d.paytype=='0'){ }}
    未支付
    {{# } else if(d.paytype=='1'){ }}
    现金支付
    {{# }else{}}
    票券支付
    {{# } }}
</script>
<script type="text/html" id="titleTpl4">
    {{# if(d.status=='0'){ }}
    未支付
    {{# } else if(d.status=='1'){ }}
    支付成功
    {{# }else{}}
    支付失败
    {{# } }}
</script>
</body>
</html>